<script setup lang="ts">

import useServiceStore from "@src/store/serviceStore";
import { inject, ref, computed } from "vue";
import { updateRelationStatus } from "@src/network/api";
import { IConversationRelation } from "@src/types";
import Typography from "@src/components/ui/data-display/Typography.vue";
const serviceStore = useServiceStore();

const status = ref(0);
const isLoading = ref(false);
var relation : IConversationRelation | undefined = undefined;
if (serviceStore.currentConversationRelationId) {
  relation = serviceStore.conversationRelations[serviceStore.currentConversationRelationId];
    if(relation == undefined) {
      //查是不是在history中
      relation = serviceStore.conversationRelationsHistory[serviceStore.currentConversationRelationId];
    }
  
  status.value = relation.status;
}

const markComplete = ()=>{
  isLoading.value = true;
  if (serviceStore.currentConversationRelationId) {
    updateRelationStatus(serviceStore.currentConversationRelationId,1).then((res)=>{
      console.log(res)
      isLoading.value = false;
      if (res.code == '10000') {
        status.value = 1;
        relation!.status = 1;
        serviceStore.currentConversationRelationId = undefined;
      }
    })
  }
}

const markUnComplete = ()=>{
  isLoading.value = true;
  if (serviceStore.currentConversationRelationId) {
    updateRelationStatus(serviceStore.currentConversationRelationId,0).then((res)=>{
      isLoading.value = false;
      if (res.code == '10000') {
        status.value = 0;
        relation!.status = 0;
        serviceStore.showComplete = false;
      }
    })
  }
}
</script>

<template>
  <div class="w-full px-3 py-3 flex border border-gray-100">
    <div class='ml-auto'>
    <button @click="markComplete" v-if="status == 0" type="button" class="bg-indigo-400 h-max w-max rounded-lg text-white font-bold hover:bg-indigo-300 duration-[500ms,800ms] dark:bg-gray-600">
        <div class="flex items-center justify-center m-[10px]"> 
            <div v-if="isLoading" class="h-5 w-5 border-t-transparent border-solid animate-spin rounded-full border-white border-4"></div>
            <Typography :no-color="true" variant="heading-2white">解决</Typography>
        </div>
    </button>
    
    <button  v-if="status == 1" @click="markUnComplete" type="button" class="bg-indigo-50 h-max w-max rounded-lg text-white font-bold hover:bg-indigo-300 duration-[500ms,800ms] dark:bg-gray-600 ">
        <div class="flex items-center justify-center m-[10px]"> 
            <div v-if="isLoading" class="h-5 w-5  border-t-transparent border-solid animate-spin rounded-full border-black border-4"></div>
            <Typography variant="heading-2">重新打开</Typography>
            
        </div>
    </button>
    </div>
  
    </div>

    <!--Top section-->
    <!-- <div class="w-full min-h-[5.25rem] px-5 py-6">
      <SelectSection
        v-if="props.selectMode"
        :select-mode="props.selectMode"
        :select-all="props.selectAll"
        :handle-close-select="props.handleCloseSelect"
        :handle-select-all="props.handleSelectAll"
        :handle-deselect-all="props.handleDeselectAll"
      />
      <ConversationInfoSection
        v-else
        :handle-open-info="handleOpenInfo"
        :handle-open-search="handleOpenSearch"
      />
    </div> -->

    <!--Pinned Message-->
    <!-- <div
      class="relative transition-[padding] duration-200"
      :class="{
        'pb-[3.75rem]':
          activeConversation.pinnedMessage &&
          !activeConversation.pinnedMessageHidden,
      }"
    >
      <PinnedMessage :active-conversation="activeConversation" />
    </div> -->

    <!--Search modal-->
    <!-- <SearchModal
      :open="openSearch"
      :close-modal="() => (openSearch = false)"
      :conversation="activeConversation"
    /> -->

    <!--Contact info modal-->
    <!-- <ConversationInfoModal
      :open="openInfo"
      :closeModal="() => (openInfo = false)"
      :conversation="activeConversation"
    /> -->

    <!--voice call modal-->
    <!-- <VoiceCallModal
      :open="store.openVoiceCall"
      :close-modal="handleCloseVoiceCallModal"
    /> -->

</template>
